<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content large">
      <div class="modal-header">
        <h3>勤务统计分析报表</h3>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="modal-body">
        <div class="report-controls">
          <div class="filter-item">
            <label>时间周期:</label>
            <select v-model="timePeriod">
              <option value="last7days">最近7天</option>
              <option value="last30days">最近30天</option>
              <option value="thisMonth">本月</option>
            </select>
          </div>
          <button class="btn btn-primary" @click="exportReportData">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
            <span>导出为 Excel</span>
          </button>
        </div>
        <div class="charts-grid">
          <v-chart class="chart" :option="barChartOption" autoresize />
          <v-chart class="chart" :option="lineChartOption" autoresize />
        </div>
        <div class="table-container">
          <table>
            <thead>
            <tr>
              <th>日期</th>
              <th>巡逻里程(km)</th>
              <th>警力使用(人次)</th>
              <th>巡逻时长(h)</th>
              <th>任务完成率</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in reportData" :key="item.date">
              <td>{{ item.date }}</td>
              <td>{{ item.mileage }}</td>
              <td>{{ item.personnel }}</td>
              <td>{{ item.duration }}</td>
              <td>{{ item.completionRate }}%</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import * as XLSX from 'xlsx';

// 注册ECharts组件
use([ CanvasRenderer, BarChart, LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent ]);

const timePeriod = ref('last7days');

// 模拟报表数据
const reportData = ref([
  { date: '2024-06-10', mileage: 120, personnel: 30, duration: 150, completionRate: 95 },
  { date: '2024-06-11', mileage: 135, personnel: 32, duration: 160, completionRate: 98 },
  { date: '2024-06-12', mileage: 110, personnel: 28, duration: 145, completionRate: 92 },
  { date: '2024-06-13', mileage: 150, personnel: 35, duration: 170, completionRate: 100 },
  { date: '2024-06-14', mileage: 140, personnel: 33, duration: 165, completionRate: 97 },
  { date: '2024-06-15', mileage: 160, personnel: 38, duration: 180, completionRate: 99 },
  { date: '2024-06-16', mileage: 130, personnel: 31, duration: 155, completionRate: 96 },
]);

const chartCategories = computed(() => reportData.value.map(d => d.date));

const barChartOption = computed(() => ({
  title: { text: '勤务量统计', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['巡逻里程(km)', '警力使用(人次)'], top: 30 },
  grid: { top: 70, left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: chartCategories.value },
  yAxis: { type: 'value' },
  series: [
    { name: '巡逻里程(km)', type: 'bar', data: reportData.value.map(d => d.mileage), itemStyle: { color: '#5470C6' } },
    { name: '警力使用(人次)', type: 'bar', data: reportData.value.map(d => d.personnel), itemStyle: { color: '#91CC75' } },
  ]
}));

const lineChartOption = computed(() => ({
  title: { text: '勤务效率分析', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['巡逻时长(h)', '任务完成率'], top: 30 },
  grid: { top: 70, left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: chartCategories.value },
  yAxis: { type: 'value', name: '时长(h)', axisLabel: { formatter: '{value} h' } },
  series: [
    { name: '巡逻时长(h)', type: 'line', smooth: true, data: reportData.value.map(d => d.duration), itemStyle: { color: '#EE6666' } },
    { name: '任务完成率', type: 'line', smooth: true, data: reportData.value.map(d => d.completionRate), itemStyle: { color: '#FAC858' } },
  ]
}));

const exportReportData = () => {
  const worksheet = XLSX.utils.json_to_sheet(reportData.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '勤务统计报表');
  XLSX.writeFile(workbook, `勤务统计分析报表_${new Date().toLocaleDateString().replace(/\//g, '-')}.xlsx`);
};
</script>

<style scoped>
@import "@/assets/styles/views/admin/ReportModal.css";
</style>
